<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef">

      <!-- 排序列 -->
      <template #sort="{ record }">
        <a-input-number
            :default-value="record.sort"
            mode="button"
            @change="changeSort($event, record.id)"
            :min="0"
            :max="1000"
        />
      </template>

      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch
            :checked-value="1"
            unchecked-value="2"
            @change="changeStatus($event, record.id)"
            :default-checked="record.status == 1"
        />
      </template>

      <!-- 操作前置扩展 -->
      <template #operationBeforeExtend="{ record }">
        <a-link
            @click="openAdd(record.id)"
            v-if=" record.parent_id === 0 "
            v-auth="['prm:life_cate:save']"
        ><icon-plus /> 新增</a-link>
      </template>
    </ma-crud>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import api from '@/api/prm/life/life_cate.js'
import { Message } from '@arco-design/web-vue'

const crudRef = ref()

const changeStatus = async (status, id) => {
  const response = await api.updateByField({ id, value:status,field:'status' })
  if (response.success) {
    Message.success(response.message)
  }
}

const openAdd = (id) => {
  columns[1].addDefaultValue = id
  crudRef.value.crudFormRef.add()
}

const changeSort = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'sort' })
  if (response.success) {
    Message.success(response.message)
  }
}

const crud = reactive({
  api: api.list,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationColumnWidth: 200,
  add: { show: true, api: api.add, auth: ['prm:life_cate:save'] },
  edit: { show: true, api: api.update, auth: ['prm:life_cate:update'] },
  delete: {
    show: true,
    api: api.delete, auth: ['prm:life_cate:delete'],
  },
  formOption: { viewType: 'drawer', width: 600 },
  isExpand: true,
  beforeOpenAdd: () => {
    columns[1].addDefaultValue = 0
    return true
  },
  beforeEdit: (params) => {
    delete params.children
    return true
  }
})

const columns = reactive([
  { title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true },
  {
    title: '上级分类', dataIndex: 'parent_id', hide: true, formType: 'select',
    dict: { url: 'prm/life_cate/allList', params: {only_parent: true },props: { label: 'name', value: 'id' }, translation: true,openPage:false  }, addDefaultValue: 0,
    editDefaultValue: (record) => {
      return record.parent_id == 0 ? undefined : record.parent_id
    }
  },
  {
    title: '分类名称', dataIndex: 'name', search: true, commonRules: [{ required: true, message: '分类名称必填' }], width: 180,
  },

  {  title: '图标', dataIndex: 'icon', width: 80, formType: 'image' },

  {
    title: '排序', dataIndex: 'sort', formType: 'input-number', addDefaultValue: 1, width: 180,
    min: 0, max: 1000
  },

  {
    title: '状态', dataIndex: 'status', search: true, formType: 'radio',
    dict: { name: 'data_status', props: { label: 'title', value: 'key' } },
    addDefaultValue: '1', width: 120,
  },

  {
    title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: true, formType: 'range', width: 180,
  },
])
</script>

<script>
export default { name: 'prm:life_cate' }
</script>

<style scoped>

</style>
